import React,{PropTypes} from "react";

import {
    Button,Input,Modal,Upload,
    fileFormatTest,pingImg
} from 'fly';

import {Icon,message,Tooltip,Radio} from 'antd';

const RadioGroup = Radio.Group;

import Title from './View_Title';

export default class ApprovalSet extends React.Component {

    static defaultProps = {
        className:"create_proofing-setting"
    };

    static propTypes = {
        token:PropTypes.string,
        record:PropTypes.object.isRequired
    };

    static contextTypes = {
        setting:PropTypes.object.isRequired,
    };

    constructor(props) {
        super(props);
        this.state = {
            noteValue:"", //备注textArea value
            fileList:[],  //上传文件列表
            replaySetting:null,   //批复设置
            partA:null,  //甲方id
            partAName:""  //甲方名称
        };
    };

    componentWillMount(){
        //stting 总设置
        this.Context = this.context.setting;

        const record = this.record = this.props.record;

        this.setState({replaySetting:record.partAName ? "2" : "1"});

        // 如果没有甲方判断客户号，如果客户号没有固定客户，否则就是客户号
        if(record && record.partAName){this.setState({partAName:record.partAName.slice(0,6)})}
        else if(!record.partAName){
            if(!record.traderName){
                this.setState({partAName:"客户"});
            }else{
                this.setState({partAName:record.traderName})
            }
        }

        if(record && record.partA){this.setState({partA:record.partA})};
    };

    testReviw = (value,cb)=>{
        const noteContext = this.Context.noteSetting;

        if(noteContext){
            const max = noteContext.maxLength;
            if( cb && value.length <= max){
                cb();
            }
        }
    };

    TextChange(e,type){
        const value = e.target.value;

        this.testReviw(value,()=>{
            // 调用验证方法 赋给状态
            this.setState({noteValue:value});
        });
    };

    getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }

    // 更新列表
    addFileItem = (file,fileList)=>{
        if(file.status === "uploading"){
            if(file.type.indexOf("image") !== -1){
                this.getBase64(file.originFileObj,(result)=>{
                    pingImg(result,(status)=>{
                        if(status === "responded"){
                            this.setState({fileList:fileList});
                        }else{
                            message.error("上传失败或不支持的类型");
                        }
                    });
                });
            }else{
                this.setState({fileList:fileList});
            }
        }else if(file.status === "done"){
            this.setState({fileList:fileList});
        }else if(file.status === "removed"){
            this.setState({fileList:fileList});
        }
    };

    fileBeforeload = (e)=>{
            const config = this.Context.upLoadSetting.FileUpLoadConfig;

            const maxSize = config.maxSize && config.maxSize*1024*1024;

            if(e.size > maxSize){
                message.info(`文件最大支持${config.maxSize}M,请更换`);
                return false;
            }

            if(e.name){
                if(fileFormatTest(config.accept,e.name)) {
                    return true
                }else{
                    message.error("文件格式错误，请重新选择");
                    return false;
                }
            }
    };

    uploadClick = ()=>{
        const maxLength = this.Context.upLoadSetting.FileUpLoadConfig.maxLength;
        if(this.state.fileList.length >= maxLength){
            message.info(`文件数量最多可上传${maxLength}个`);
        }
    };

    // 上传文件配置
    uploadConfig = {
        action: 'http://up-z2.qiniu.com',
        beforeUpload:this.fileBeforeload,
        accept:this.fileAccept,
    };

    uploadRender = ()=>{
       const fileList = this.state.fileList;

       const maxLength = this.Context.upLoadSetting.FileUpLoadConfig.maxLength;

       return  <Upload
            className=""
            filePlugin={this.uploadConfig}
            fileList={fileList}
            token={this.props.token}
            callBack={this.addFileItem}   //回调，第一个参数为file,第二个参数为本地name
            disabled={maxLength<=fileList.length}
        >
            <Button onClick={this.uploadClick}> 上传 </Button>
        </Upload>
    };

    replySetting = (status,e)=>{
        switch (status) {
            case "yes" : this.setState({replaySetting:"3"}); return;
            case "no" :
                const partAName = this.record.partAName;
                this.setState({replaySetting:partAName ? "2" : "1"});
                return;
            case "change" :this.setState({partAName:e.target.value}); return;
            case "blur" :this.setState({partAName:this.state.partAName.slice(0,6)});
        }
    };

    render() {
        const props = Object.assign({},this.props);

        const {noteValue,replaySetting,partAName} = this.state;

        const Context = this.Context;

        // 备注设置 && 上传文件设置
        const {noteSetting,upLoadSetting} = Context;

        const baseCls = props.className;

        const isPartAName = !!this.record.partAName;

        return (
            <section className={baseCls}>

                <div className={`${baseCls}-approval`}>
                    <Title title="批复设置" isAlarm={false}/>
                        <div data-type="wrap">
                            <div className="create_proofing-view-approval" data-type="send">
                                {/*<Icon type="close-circle" onClick={this.removeRaidoPlus}/>*/}
                                <div data-type="content"> {props.record.partBName.slice(0,6)} </div>
                                <span data-type="des"> 打样寄出 </span>
                                <i></i>
                            </div>
                            <div className="create_proofing-view-approval" data-type="batch">
                                <div data-type="content">
                                    <span> {partAName} </span>
                                </div>
                                <span data-type="des"> 批复
                                    {
                                        !!partAName || <Tooltip
                                            title="该订单无甲方，如需打样批复，
                                        请输入甲方公司名称，批复结果乙方录入"
                                        >
                                            <Icon type="question-circle-o" />
                                        </Tooltip>
                                    }
                                </span>
                                <i> </i>
                            </div>
                            <div className="create_proofing-view-approval" data-type="plus">
                                <div data-type="content">
                                    <span>品牌商批复</span>
                                    <RadioGroup onChange={(e)=>{this.replySetting(e.target.value)}} value={replaySetting === "3" ? "yes" : "no"}>
                                        <Radio value="yes"> 是 </Radio>
                                        <Radio value="no"> 否 </Radio>
                                    </RadioGroup>
                                </div>
                            </div>
                        </div>
                </div>

                <div className={`${baseCls}-note`}>
                    <Title isAlarm={false} style={{paddingRight:30}} title={noteSetting.title}/>
                    <Input type="textarea" onChange={(e)=>this.TextChange(e,"note")} value={noteValue}
                           placeholder={noteSetting.placeholder}
                           maxLength={noteSetting.maxLength}
                    />
                </div>

                <div className={`${baseCls}-upload`}>
                    <Title isAlarm={false}  style={{paddingRight:30}} title={upLoadSetting.title}/>
                    {
                        this.uploadRender()
                    }
                    <p> {upLoadSetting.alarm} </p>
                </div>

            </section>
        )
    }
}